<script setup lang="ts">
import DiskIOStats from '@/components/DiskIOStats.vue'
import RealtimeDiskIO from '@/components/RealtimeDiskIO.vue'
</script>

<template>
  <div>
    <div class="page-header">
      <h2 class="page-title">磁盘IO速度监控</h2>
      <p class="page-description">实时监控磁盘读写速度和IO性能指标，帮助您了解磁盘负载情况</p>
    </div>

    <div class="monitoring-section">
      <RealtimeDiskIO />
    </div>

    <div class="monitoring-section">
      <DiskIOStats />
    </div>
  </div>
</template>

<style scoped lang="scss">
@use '@/style/variables.scss' as vars;

.page-header {
  text-align: center;
  margin-bottom: vars.$spacing-2xl;
  padding: vars.$spacing-xl;
  background: vars.$bg-glass;
  backdrop-filter: blur(12px);
  border-radius: vars.$radius-xl;
  border: 1px solid vars.$border-glass;
}

.page-title {
  font-size: vars.$font-size-2xl;
  font-weight: 700;
  margin-bottom: vars.$spacing-md;
  color: vars.$text-primary;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.page-description {
  font-size: vars.$font-size-lg;
  color: vars.$text-secondary;
  margin: 0;
  line-height: 1.6;
}

.monitoring-section {
  margin-bottom: vars.$spacing-2xl;
}

@media (max-width: 768px) {
  .page-header {
    padding: vars.$spacing-lg;
    margin-bottom: vars.$spacing-lg;
  }

  .page-title {
    font-size: vars.$font-size-xl;
  }

  .page-description {
    font-size: vars.$font-size-base;
  }
}
</style>
